<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<title>主页</title>

<%@ include file="/pages/css_template.jsp"%>
	<style>
		/* styles.css */

		/* 全局样式 */
		body {
			font-family: Arial, sans-serif;
			background-color: #f8f9fa;
		}

		/* 导航栏样式 */
		.navbar-inverse {
			background-color: #343a40;
			border-color: #2c3034;
		}

		.navbar-inverse .navbar-brand {
			color: #fff;
		}

		.navbar-inverse .navbar-nav > li > a {
			color: #fff;
		}

		.navbar-inverse .navbar-nav > li > a:hover {
			color: #007bff;
		}



		/* 主要内容区域样式 */
		.main {
			padding-top: 70px; /* 考虑到固定导航栏的高度 */
		}

		.page-header {
			color: #007bff;
			margin-top: 0;
		}

		/* 卡片样式 */
		.placeholders {
			margin-top: 20px;
		}

		.placeholder {
			text-align: center;
			padding: 20px;
			background-color: #fff;
			border: 1px solid #ddd;
			border-radius: 5px;
			box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		}

		.imgBox img {
			max-width: 100%;
			height: auto;
		}

		.imgText {
			font-size: 24px;
			color: #007bff;
		}

		/* 表格样式 */
		.table-responsive {
			margin-top: 20px;
		}

		.table thead th {
			background-color: #007bff;
			color: #fff;
		}

		.table tbody tr:nth-child(even) {
			background-color: #f8f9fa;
		}

		.table tbody tr:hover {
			background-color: #e2e6ea;
		}

		.table tbody td {
			vertical-align: middle;
		}

	</style>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">教务管理系统</span> <span class="icon-bar"></span>
					<span class="icon-bar"></span> <span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="${pageContext.request.contextPath}/mainUrl">教务管理系统</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<!-- 导航条菜单 -->
				<%@ include file="/pages/header_nav_template.jsp"%>

			</div>
		</div>
	</nav>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
			
			   <!-- 侧边栏 -->
				<jsp:include page="/pages/side_nav_template.jsp">
					<jsp:param value="active" name="1" />
				</jsp:include>
			</div>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
				<h1 class="page-header">欢迎您, ${loginUser.getDisplayName() }！</h1>

				<div class="row placeholders">
					<div class="col-xs-6 col-sm-3 placeholder">
						<div class="imgBox">
							<img src="<%=basePath%>/img/nav1.jpg">
							<h1 class="imgText">${studentNum}</h1>
						</div>
						<h4>学生总数</h4>
						<span class="text-muted">Student</span>
					</div>

					<div class="col-xs-6 col-sm-3 placeholder">
						<div class="imgBox">
							<img src="<%=basePath%>/img/nav2.jpg">
							<h1 class="imgText">${courseNum }</h1>
						</div>
						<h4>课程总数</h4>
						<span class="text-muted">Class</span>
					</div>

					<div class="col-xs-6 col-sm-3 placeholder">
						<div class="imgBox">
							<img src="<%=basePath%>/img/nav3.jpg">
							<h1 class="imgText">${onlineNums }</h1>
						</div>
						<h4>在线人数</h4>
						<span class="text-muted">Online</span>
					</div>

					<div class="col-xs-6 col-sm-3 placeholder">
						<div class="imgBox">
							<img src="<%=basePath%>/img/nav4.jpg">
							<h1 class="imgText">${days}</h1>
						</div>
						<h4>运行天数</h4>
						<span class="text-muted">Days</span>
					</div>

				</div>

				<h2 class="sub-header">成绩一览</h2>
				<div class="table-responsive">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>编号</th>
								<th>学号</th>
								<th>姓名</th>
								<th>科目</th>
								<th>分数</th>
							</tr>
						</thead>
						<tbody>
							<c:forEach var="score" items="${scores }" varStatus="status">
							<tr>
							    <td>${status.index + 1 }</td>
							    <td>${score.studentNo }</td>
							    <td>${score.studentName }</td>
							    <td>${score.courseName }</td>
							    <td>${score.score }</td>
							</tr>
							</c:forEach>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</body>
</html>